<!--
 * Description: 表格头部单元格的封装
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/06/3 10:34
-->

<template>
  <td :colspan="colspan" :rowspan="rowspan" :style="customStyle">
    <div class="base-table-head-cell" :style="customStyle1">
      <div
        class="slot-wrap"
        :class="[checkList.length > 0 ? 'filter-active' : '']"
        :style="customStyle2"
      >
        {{ label }}
        <span v-if="sortable" class="caret" @click.stop="sortAction">
          <i class="sort-caret top" :style="sortStyle(0)" />
          <i class="sort-caret bottom" :style="sortStyle(1)" />
        </span>
        <el-popover v-if="filters" v-model="visible" placement="right" trigger="click" width="200">
          <el-checkbox-group
            v-model="checkList"
            style="overflowX:scroll"
            :style="filtersList.length > 30 ? scrollStyle : ''"
          >
            <div v-for="(item, index) in filtersList" :key="index">
              <el-checkbox :label="item.text" :value="item.value" />
            </div>
          </el-checkbox-group>
          <div class="filter-btn">
            <el-button
              :disabled="!checkList.length > 0"
              type="text"
              @click.stop="filterComfirmAction"
            >
              {{ $t('Base.filter') }}
            </el-button>
            <el-button type="text" @click.stop="filterReset">{{ $t('Base.reset') }}</el-button>
          </div>
          <i slot="reference" class="filters el-icon-arrow-down" :style="filterStyle" />
        </el-popover>
      </div>
    </div>
  </td>
</template>
<script>
export default {
  name: 'BaseTableHeadCell',
  props: {
    label: {
      default: '',
      type: String
    },
    align: {
      default: 'center',
      type: String
    },
    width: {
      default: '150',
      type: String
    },
    sortable: {
      default: false,
      type: Boolean
    },
    prop: {
      default: '',
      type: String
    },
    rowspan: {
      default: '1',
      type: String
    },
    colspan: {
      default: '1',
      type: String
    },

    filters: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      visible: false,
      sortIndex: -1,
      checkList: [],
      filtersList: [],
      copyCurrent: []
    }
  },
  computed: {
    customStyle() {
      return {
        width: this.width + 'px'
      }
    },
    customStyle1() {
      if (this.colspan > 1) {
        return {
          width: '100%'
        }
      } else {
        return {
          width: this.width + 'px'
        }
      }
    },
    customStyle2() {
      return {
        textAlign: this.align
      }
    },
    sortStyle() {
      return d => {
        return {
          borderBottomColor: d === this.sortIndex ? '#409eff' : '#c0c4cc'
        }
      }
    },
    filterStyle() {
      return {
        marginLeft: this.sortable ? '18px' : '5px'
      }
    },
    scrollStyle() {
      return {
        maxHeight: '300px',
        overflowY: 'scroll'
      }
    }
  },
  methods: {
    // 根据已经有的数据进行去重之后获取过滤条件
    getFiltersData(isChange, current) {
      if (isChange) {
        if (this.isPoint(current)) {
          this.filterReset()
        }
      }
      if (this.init) return
      this.init = true
      const formData = this.$parent.$parent.formData
      const arr1 = []
      for (const item1 of formData) {
        if (!arr1.includes(item1[this.prop]) && item1[this.prop]) {
          arr1.push(item1[this.prop])
        }
      }
      const arr2 = []
      for (const item2 of arr1) {
        arr2.push({
          text: item2,
          value: item2
        })
      }
      arr2.push({
        text: '无',
        value: ''
      })
      this.filtersList = arr2
    },
    // 是否命中（下拉筛选是否选中的是当前条件）
    isPoint(current) {
      var newArr = current.filter(value => this.copyCurrent.indexOf(value) === -1)
      var oldArr = this.copyCurrent.filter(value => current.indexOf(value) === -1)
      const result = newArr.concat(oldArr)
      this.copyCurrent = this.$deepCopy(current) || []
      return result[0] === this.label
    },

    sortAction() {
      if (this.sortable) {
        if (this.sortIndex === -1) {
          this.sortIndex = 1
        } else if (this.sortIndex === 1) {
          this.sortIndex = 0
        } else {
          this.sortIndex = -1
        }
        this.$parent.$parent.sortAction({
          sortIndex: this.sortIndex,
          prop: this.prop
        })
      }
    },
    cancelAction() {
      this.visible = false
    },
    filterReset() {
      this.$parent.$parent.filterReset({
        data: [],
        prop: this.prop
      })
      this.checkList = []
      this.cancelAction()
    },
    filterComfirmAction() {
      const checkValueList = []
      for (const item1 of this.checkList) {
        for (const item2 of this.filtersList) {
          if (item1 === item2.text) {
            checkValueList.push(item2.value)
            break
          }
        }
      }
      this.$parent.$parent.filterAction({
        data: checkValueList,
        prop: this.prop
      })
      this.cancelAction()
    }
  }
}
</script>
<style lang="scss" scoped>
td {
  padding: 0px;
  border: none;
  position: relative;
}
.base-table-head-cell {
  width: 100%;
  height: 100%;
}
.slot-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}
.caret {
  position: relative;
  margin-left: 4px;
  cursor: pointer;

  .top {
    top: -10px;
  }
  .bottom {
    top: 3px;
    transform: rotate(180deg);
  }
  .sort-caret {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    position: absolute;
  }
}
.filters {
  margin-left: 15px;
  font-size: 12px;
  cursor: pointer;
}
.filter-btn {
  margin-top: 10px;
  border-top: 1px solid #f5f5f5;
  line-height: 30px;
  height: 30px;
}
.filter-active {
  color: #409eff;
}
</style>
